<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'1#天车'}){}
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--    <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">-->
<!--    <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">-->

</head>
<body>
<div class="layui-container" style="margin: 0;width: 100%">
    <div class="layui-fluid">
        <div class="layui-col-md9">
            <div class="layui-card" style="margin: 5px">
                <div class="layui-card-body">
                    <div class="pixiArea" id="craneAnimate">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card" style="margin: 5px;height:565px">
                <div class="layui-card-header">
                    <h3 class="card-header-style">设备状态</h3>
                </div>
                <div class="layui-card-body">
                    <div style="padding:2px;width:100%;text-align: center">
                        <label class="data-label" for="data-input">天车上电</label>
                        <input class="data-container" type="text" id="data-input" value="默认数据">
                    </div>

                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="automaticModeLabel">运行模式</label>
                        <input class="data-container" type="text" id="automaticModeLabel" value="默认数据">
                    </div>

                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="craneXLabel">大车位置</label>
                        <input class="data-container" type="text" id="craneXLabel" value="默认数据">
                    </div>

                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="craneYLabel">小车位置</label>
                        <input class="data-container" type="text" id="craneYLabel" value="默认数据">
                    </div>

                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="craneZLabel">起升高度</label>
                        <input class="data-container" type="text" id="craneZLabel" value="默认数据">
                    </div>


                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="nowTask">运行状态</label>
                        <input class="data-container" type="text" id="nowElectricStatus" value="默认数据">
                    </div>

                    <div style="padding:2px;text-align: center;margin-top: 12px">
                        <label class="data-label" for="nowSteel">当前钢板</label>
                        <input class="data-container" type="text" id="nowElectricSteel" value="默认数据">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="margin: 10px;height: 360px">
                <div class="layui-card-header">
                    <h3 class="card-header-style">任务状态</h3>
                </div>

                <div class="layui-card-body">
                    <div class="circle_border">


                        <label class="task-data-label" for="craneYLabel">当前状态</label>
                        <input class="task-data-container" type="text" id="nowStatus" value="默认数据">


                        <label class="task-data-label" for="craneYLabel">当前模式</label>
                        <input class="task-data-container" type="text" id="nowMode" value="默认数据">

                        <label class="task-data-label" for="craneYLabel">当前任务</label>
                        <input class="task-data-container" type="text" id="nowTask" value="默认数据">


                        <label class="task-data-label" for="craneYLabel">当前步骤</label>
                        <input class="task-data-container" type="text" id="nowStep" value="默认数据">


                        <label class="task-data-label" for="craneYLabel">当前钢板</label>
                        <input class="task-data-container" type="text" id="nowSteel" value="默认数据">


                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="margin: 10px;height: 360px">
                <div class="layui-card-header">
                    <h3 class="card-header-style">控制区域</h3>
                </div>


                <div class="layui-card-body">
                    <from class="layui-form" action="">
                        <div class="layui-inline">
                            <div class="layui-inline">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">工作模式：</label>
                                    <input type="radio" id="offlineMode" name="selectWorkModel" value="offline"
                                           title="下线"
                                           lay-filter="WorkModeRadio" checked>
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label" style="margin-left :0">吸取张数：</label>
                            <input type="number" class="layui-input" id="sheetNumberInput"
                                   name="sheetNumber"
                                   lay-verify="required"
                                   lay-filter="" required lay-verify="required" autocomplete="off"
                                   style="margin-left :0;width: 85px;display: inline" value="1"/>

                        </div>


                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 62%">
                                <button class="layui-btn" lay-submit lay-filter="startTask">开始任务</button>
                                <button class="layui-btn" lay-submit lay-filter="stopTask">停止任务
                                </button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 62%">
                                <button class="layui-btn  layui-btn-danger" lay-submit lay-filter="actionError">紧急停车
                                </button>
                                <button class="layui-btn layui-btn-warm" lay-submit lay-filter="stopTask">取消任务
                                </button>
                            </div>
                        </div>


                    </from>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPath}/externaljs/pixijs/pixi.min.js"></script>
<script src="${ctxPath}/baotou-steel/craneWork/craneWorkPublic.js"></script>
<script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
<script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
<script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>

@include("/include/_container.html", {'js':'/baotou-steel/craneWork/CD0CraneWork.js'}){}
</body>
<style>
    .card-header-style {
        font-weight: bold; /* 设置字体加粗 */
        letter-spacing: 3px; /* 设置文字间距为2像素 */
    }

    .pixiArea {
        margin-left: 0;
        padding: 0;
    }

    .data-label {
        display: inline-block;
        padding: 8px 16px;
        background-color: #4285F4;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 4px;
        width: 20%;
    }

    .task-data-label {
        display: inline-block;
        padding: 8px 16px;
        background-color: #4285F4;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        border-radius: 4px;
        width: 12%;
        margin-top: 16px;
    }

    .task-data-container {
        font-size: 24px;
        margin-left: 5px;
        border: none;
        outline: none;
        color: black;
        font-weight: bold;
        border-radius: 4px;
        width: 20%;
        padding: 8px 16px;
        margin-top: 16px;

    }

    .data-container {
        font-size: 24px;
        margin-left: 12px;
        border: none;
        outline: none;
        color:  black;
        font-weight: bold;
        border-radius: 4px;
        width: 30%;
        padding: 8px 16px;

    }

    /*实现圆角边框*/
    .circle_border {
        /* 设置边框样式 */
        margin: 5px;
        border: 5px solid #b3d9ff;
        border-radius: 20px; /* 设置圆角半径 */
        padding: 30px; /* 设置内边距 */
        width: 90%; /* 设置宽度 */
        height: 220px; /* 设置高度 */
    }

</style>
</html>